<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>商品管理系统</title>
    <style>
        /* 保持原有样式不变 */
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }

        .manage-box {
            margin-bottom: 20px;
            padding: 15px;
            background: #f5f5f5;
            border-radius: 8px;
        }

        .form-inline {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            align-items: center;
        }

        .form-inline label {
            font-size: 14px;
            margin-right: 8px;
        }

        .form-inline input {
            font-size: 14px;
            padding: 6px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 200px;
        }

        button {
            font-size: 14px;
            padding: 6px 15px;
            cursor: pointer;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
        }

        button:hover {
            background: #0056b3;
        }

        .product-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        .product-table th {
            background: #f5f5f5;
            padding: 12px;
            text-align: left;
            border-bottom: 2px solid #ddd;
        }

        .product-table td {
            padding: 12px;
            border-bottom: 1px solid #ddd;
        }

        .action-buttons button {
            margin-right: 5px;
            padding: 4px 8px;
            font-size: 12px;
        }

        .add-form {
            margin-top: 20px;
            padding: 15px;
            background: #fff;
            border-radius: 4px;
            border: 1px solid #ddd;
        }

        /* 新增开关样式 */
        .config-switch {
            margin-bottom: 15px;
            padding: 10px;
            background: #e9f5ff;
            border-radius: 4px;
        }

        /* 保持原有样式不变，新增以下样式 */
        .color-input {
            width: 150px; /* 适当调整颜色输入框宽度 */
        }

        /* 新增按钮样式 */
        .pause-btn {
            background: #ffc107 !important; /* 暂停按钮 - 黄色 */
            color: #212529 !important;
        }

        .enable-btn {
            background: #17a2b8 !important; /* 启用按钮 - 青色 */
            color: white !important;
        }

        .delete-btn {
            background: #dc3545 !important; /* 删除按钮 - 红色 */
        }

        /* 按钮悬停效果 */
        .pause-btn:hover {
            background: #e0a800 !important;
        }

        .enable-btn:hover {
            background: #138496 !important;
        }

        .delete-btn:hover {
            background: #c82333 !important;
        }
    </style>
</head>
<body>
<div class="container">
    <div style="margin-bottom: 20px;">
        <a href="product-search.html" style="font-size: 16px; text-decoration: none; color: #007bff;">跳转到商品搜索页</a>
    </div>

    <div class="manage-box">
        <h2 style="font-size: 18px; margin-bottom: 15px;">商品管理</h2>

<!--
        <div class="config-switch">
            <div class="form-inline">
                <label style="margin-right: 15px;">
                    <input type="checkbox" id="configSwitch" style="margin-right: 5px;">
                    开启轮询任务
                </label>
                <button onclick="saveSwitchState()" style="background: #28a745;">保存设置</button>
            </div>
        </div>
-->

        <!-- 修改后的添加表单 -->
        <div class="add-form">
            <div class="form-inline">
                <div class="form-group">
                    <label for="newProductNo">货号：</label>
                    <input type="text" id="newProductNo" placeholder="请输入货号" required>
                </div>
                <!-- 新增颜色输入框 -->
                <div class="form-group">
                    <label for="newProductColor" style="margin-left: 15px;">颜色：</label>
                    <input type="text" id="newProductColor" class="color-input" placeholder="请输入颜色" required>
                </div>
                <button onclick="saveProduct()" style="background: #28a745;">添加商品</button>
            </div>
        </div>

        <!-- 修改后的商品列表 -->
        <table class="product-table">
            <thead>
            <tr>
                <th style="width: 50%;">货号</th>
                <th style="width: 30%;">颜色</th> <!-- 新增颜色列 -->
                <th style="width: 20%;">操作</th>
            </tr>
            </thead>
            <tbody id="productList">
            <!-- 商品数据将通过JS渲染 -->
            </tbody>
        </table>
    </div>
</div>


<script>
    // 初始化加载商品列表和开关状态
    fetchProducts();
 /*   fetchSwitchState();*/

    function fetchProducts() {
        /* fetch('http://localhost:8090/arcteryx/product/list')*/
        fetch('/arcteryx/product/list', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({})
        })
            .then(response => response.json())
            .then(data => {
                renderProductList(data.data);
            })
            .catch(error => console.error('Error:', error));
    }

    function renderProductList(products) {
        const tbody = document.getElementById('productList');
        tbody.innerHTML = '';

        products.forEach(product => {
            const row = document.createElement('tr');

            // 根据状态决定按钮文本和点击事件
            const status = product.status; // 默认启用状态
            const buttonText = status === 0 ? '启用' : '暂停';
            const buttonClass = status === 0 ? 'enable-btn' : 'pause-btn';
            const buttonAction = status === 0 ? 'enableProduct' : 'pauseProduct';
            // 修改颜色显示逻辑
            const displayColor = product.color || ''; // 当color为null时显示空字符串
            row.innerHTML = `
                <td>${product.productNo}</td>
                <td>${displayColor}</td>
                <td class="action-buttons">
                    <button onclick="${buttonAction}('${product.productNo}')" class="${buttonClass}">
                        ${buttonText}
                    </button>
                    <button onclick="deleteProduct('${product.productNo}')" style="background: #dc3545;">删除</button>
                </td>
            `;
            tbody.appendChild(row);
        });
    }

    // 新增启用商品功能
    function enableProduct(productNo) {
        if (confirm('确定要启用该商品吗？')) {
            fetch('/arcteryx/product/enable', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({productNo})
            })
                .then(response => {
                    if (!response.ok) throw new Error('启用失败');
                    fetchProducts();
                    alert('商品已启用');
                })
                .catch(error => {
                    console.error('启用商品失败:', error);
                    alert('启用商品失败');
                });
        }
    }

    // 修改后的暂停商品功能
    function pauseProduct(productNo) {
        if (confirm('确定要暂停该商品吗？')) {
            fetch('/arcteryx/product/pause', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({productNo})
            })
                .then(response => {
                    if (!response.ok) throw new Error('暂停失败');
                    fetchProducts();
                    alert('商品已暂停');
                })
                .catch(error => {
                    console.error('暂停商品失败:', error);
                    alert('暂停商品失败');
                });
        }
    }

    // 修改后的保存商品函数
    function saveProduct() {
        const productNo = document.getElementById('newProductNo').value;
        const color = document.getElementById('newProductColor').value; // 获取颜色值

        if (!productNo ) { // 新增颜色验证
            alert('请输入货号');
            return;
        }

        fetch('/arcteryx/product/add', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({productNo, color}) // 发送颜色数据
        })
            .then(response => {
                if (!response.ok) throw new Error('添加失败');
                fetchProducts();
                document.getElementById('newProductNo').value = '';
                document.getElementById('newProductColor').value = ''; // 清空颜色输入框
            })
            .catch(error => console.error('Error:', error));
    }

    function deleteProduct(productNo) {
        if (confirm('确定要删除该商品吗？')) {
            fetch('/arcteryx/product/delete', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({productNo})
            })
                .then(response => {
                    if (!response.ok) throw new Error('删除失败');
                    fetchProducts();
                })
                .catch(error => console.error('Error:', error));
        }
    }

    // 配置开关相关方法
    function fetchSwitchState() {
        fetch('/arcteryx/switch/status', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({})
        })
            .then(response => response.json())
            .then(data => {
                document.getElementById('configSwitch').checked = data.data.configSwitch;
            })
            .catch(error => console.error('获取开关状态失败:', error));
    }

    function saveSwitchState() {
        const isEnabled = document.getElementById('configSwitch').checked;

        fetch('/arcteryx/switch/change', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({configSwitch: isEnabled})
        })
            .then(response => {
                if (!response.ok) throw new Error('保存失败');
                alert('配置已保存');
            })
            .catch(error => {
                console.error('保存开关状态失败:', error);
                alert('保存配置失败');
            });
    }
</script>
</body>
</html>